<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"><meta name="format-detection" content="telephone=no">
    <title>layout</title>
    <link rel="stylesheet" href="../plugin/seedsui/seedsui.min.css">
    <style>
        #row{
        	width: 100%;
        	background-color:#fff;
        	margin:10px 0;
        }
        #box{
        	width:210px;
        	height:210px;
        	margin:10px auto;
        	background-color:#fff;
        	overflow:hidden;
        }
        .case{
        	width: 70px;
        	height:70px;
        }
        p{
        	margin-top:20px;
            text-align:center;
        }
        .anim-move{
            -webkit-animation:animmove 5s linear;
            -webkit-animation-fill-mode:forwards;
        }
        @-webkit-keyframes animmove{
            from{
                transform:translateX(0);
            }to{
                transform:translateX(-1050px);
            }
        }
    </style>
</head>

<body>
    <section class="active">
        <header>
            <div class="titlebar">
                <a href="javascript:back()">
                    <i class="icon icon-arrowleft"></i>
                </a>
                <h1>布局容器</h1>
            </div>
        </header>
        <article>
        	<!-- box-->
        	<div class="sliver">box(兼容android4.0及以上)</div>
            <p>水平居中对齐box-center</p>
            <div class="box box-center" id="box">
                <div class="case" style="background-color:coral;"></div>
            </div>
            
            <p>右对齐box-right</p>
            <div class="box box-right" id="box">
                <div class="case" style="background-color:coral;"></div>
            </div>
            
            <p>垂直居中对齐box-middle</p>
            <div class="box box-middle" id="box">
                <div class="case" style="background-color:coral;"></div>
            </div>
            
            <p>底部对齐box-bottom</p>
            <div class="box box-bottom" id="box">
                <div class="case" style="background-color:coral;"></div>
            </div>
            
            <p>水平垂直居中对齐box-middlecenter</p>
            <div class="box box-middlecenter" id="box">
                <div class="case" style="background-color:coral;"></div>
            </div>
            
            <p>垂直排列box-vertical</p>
            <div class="box box-vertical" id="box">
                <div class="case" style="background-color:coral;"></div>
                <div class="case" style="background-color:lightblue;"></div>
                <div class="case" style="background-color:khaki;"></div>
                <div class="case" style="background-color:pink;"></div>
                <div class="case" style="background-color:lightgrey;"></div>
                <div class="case" style="background-color:lightgreen;"></div>
            </div>

            <p>水平排列box-horizontal</p>
            <div class="box box-horizontal" id="box">
                <div class="case" style="background-color:coral;"></div>
                <div class="case" style="background-color:lightblue;"></div>
                <div class="case" style="background-color:khaki;"></div>
                <div class="case" style="background-color:pink;"></div>
                <div class="case" style="background-color:lightgrey;"></div>
                <div class="case" style="background-color:lightgreen;"></div>
            </div>

            <!-- justify-content-->
            <div class="sliver">justify-content(兼容性不好，慎用)</div>
            <p>一页一屏（有些手机用了不能点击，慎用）</p>
            <div style="width:210px;overflow:hidden;margin:8px auto;">
                <div class="box box-shrink anim-move">
                    <div style="background-color:coral;height:100px;"></div>
                    <div style="background-color:lightblue;"></div>
                    <div style="background-color:khaki;"></div>
                    <div style="background-color:pink;"></div>
                    <div style="background-color:lightgrey;"></div>
                    <div style="background-color:lightgreen;"></div>
                </div>
            </div>
            
            <p>居中对齐justify-center</p>
            <div class="flex justify-center" id="box">
                <div class="case" style="background-color:coral;"></div>
            </div>

            <p>拉伸justify-stretch</p>
            <div class="flex justify-stretch" id="box">
                <div class="flex-1" style="background-color:coral;"></div>
                <div class="flex-1" style="background-color:lightblue;"></div>
                <div class="flex-1" style="background-color:khaki;"></div>
            </div>

            <p>左对齐justify-start</p>
            <div class="flex justify-start" id="row">
                <div class="case" style="background-color:coral;"></div>
                <div class="case" style="background-color:lightblue;"></div>
                <div class="case" style="background-color:khaki;"></div>
            </div>
            
            <p>居中对齐justify-center</p>
            <div class="flex justify-center" id="row">
                <div class="case" style="background-color:pink;"></div>
                <div class="case" style="background-color:lightgrey;"></div>
                <div class="case" style="background-color:lightgreen;"></div>
            </div>
            
            <p>右对齐justify-end</p>
            <div class="flex justify-end" id="row">
                <div class="case" style="background-color:coral;"></div>
                <div class="case" style="background-color:lightblue;"></div>
                <div class="case" style="background-color:khaki;"></div>
            </div>
            
            <p>水平两端分布justify-between</p>
            <div class="flex justify-between" id="row">
                <div class="case" style="background-color:coral;"></div>
                <div class="case" style="background-color:lightblue;"></div>
                <div class="case" style="background-color:khaki;"></div>
            </div>
            
            <p>水平居中分布justify-around</p>
            <div class="flex justify-around" id="row">
                <div class="case" style="background-color:coral;"></div>
                <div class="case" style="background-color:lightblue;"></div>
                <div class="case" style="background-color:khaki;"></div>
            </div>

            <!-- flex-flow-->
        	<div class="sliver">flex-flow(兼容性不好，慎用)</div>
            <p>一行显示flex-row</p>
            <div class="flex flex-row" id="row">
                <div class="case" style="background-color:coral;"></div>
                <div class="case" style="background-color:lightblue;"></div>
                <div class="case" style="background-color:khaki;"></div>
            </div>
            
            <p>一行显示（倒序）flex-row-reverse</p>
            <div class="flex flex-row-reverse" id="row">
                <div class="case" style="background-color:coral;"></div>
                <div class="case" style="background-color:lightblue;"></div>
                <div class="case" style="background-color:khaki;"></div>
            </div>
            
            <p>一行显示（换行）flex-row-wrap</p>
            <div class="flex flex-row-wrap" id="row" style="width:210px">
                <div class="case" style="background-color:coral;"></div>
                <div class="case" style="background-color:lightblue;"></div>
                <div class="case" style="background-color:khaki;"></div>
                <div class="case" style="background-color:pink;"></div>
                <div class="case" style="background-color:lightgrey;"></div>
                <div class="case" style="background-color:lightgreen;"></div>
            </div>
            
            <p>一列显示flex-col</p>
            <div class="flex flex-col" id="box">
                <div class="case" style="background-color:coral;"></div>
                <div class="case" style="background-color:lightblue;"></div>
                <div class="case" style="background-color:khaki;"></div>
            </div>
            
            <p>一列显示（换行）flex-col-wrap</p>
            <div class="flex flex-col-wrap" id="box">
                <div class="case" style="background-color:coral;"></div>
                <div class="case" style="background-color:lightblue;"></div>
                <div class="case" style="background-color:khaki;"></div>
                <div class="case" style="background-color:pink;"></div>
                <div class="case" style="background-color:lightgrey;"></div>
                <div class="case" style="background-color:lightgreen;"></div>
            </div>
            
            <!-- align-content-->
            <div class="sliver">align-content(兼容性不好，慎用)</div>
            <p>垂直居中flex-row-wrap align-center</p>
            <div class="flex flex-row-wrap align-center" id="box">
                <div class="case" style="background-color:coral;"></div>
            </div>

            <p>拉伸flex-row-wrap align-stretch</p>
            <div class="flex flex-row-wrap align-stretch" id="box">
                <div class="flex-1" style="background-color:coral;"></div>
                <div class="flex-1" style="background-color:lightblue;"></div>
                <div class="flex-1" style="background-color:khaki;"></div>
            </div>
            
            <p>顶部对齐flex-row-wrap align-start</p>
            <div class="flex flex-row-wrap align-start" id="box">
                <div class="case" style="background-color:coral;"></div>
                <div class="case" style="background-color:lightblue;"></div>
                <div class="case" style="background-color:khaki;"></div>
            </div>
            
            <p>垂直居中对齐flex-row-wrap align-center</p>
            <div class="flex flex-row-wrap align-center" id="box">
                <div class="case" style="background-color:coral;"></div>
                <div class="case" style="background-color:lightblue;"></div>
                <div class="case" style="background-color:khaki;"></div>
                <div class="case" style="background-color:pink;"></div>
                <div class="case" style="background-color:lightgrey;"></div>
                <div class="case" style="background-color:lightgreen;"></div>
            </div>
            
            <p>底部对齐flex-row-wrap align-end</p>
            <div class="flex flex-row-wrap align-end" id="box">
                <div class="case" style="background-color:coral;"></div>
                <div class="case" style="background-color:lightblue;"></div>
                <div class="case" style="background-color:khaki;"></div>
                <div class="case" style="background-color:pink;"></div>
                <div class="case" style="background-color:lightgrey;"></div>
                <div class="case" style="background-color:lightgreen;"></div>
            </div>
            
            <p>垂直两端分布flex-row-wrap align-between</p>
            <div class="flex flex-row-wrap align-between" id="box">
                <div class="case" style="background-color:coral;"></div>
                <div class="case" style="background-color:lightblue;"></div>
                <div class="case" style="background-color:khaki;"></div>
                <div class="case" style="background-color:pink;"></div>
                <div class="case" style="background-color:lightgrey;"></div>
                <div class="case" style="background-color:lightgreen;"></div>
            </div>
            
            <p>垂直居中分布flex-row-wrap align-around</p>
            <div class="flex flex-row-wrap align-around" id="box">
                <div class="case" style="background-color:coral;"></div>
                <div class="case" style="background-color:lightblue;"></div>
                <div class="case" style="background-color:khaki;"></div>
                <div class="case" style="background-color:pink;"></div>
                <div class="case" style="background-color:lightgrey;"></div>
                <div class="case" style="background-color:lightgreen;"></div>
            </div>
            
            <!-- align-items-->
            <div class="sliver">align-items(兼容性不好，慎用)</div>
            <p>拉伸align-items-stretch</p>
            <div class="flex align-items-stretch" id="box">
                <div class="flex-1" style="background-color:coral;">1</div>
                <div class="flex-1" style="background-color:lightblue;">2</div>
                <div class="flex-1" style="background-color:khaki;">3</div>
            </div>
            
            <p>顶部对齐align-items-start</p>
            <div class="flex align-items-start" id="box">
                <div class="flex-1" style="background-color:coral;">1</div>
                <div class="flex-1" style="background-color:lightblue;">2</div>
                <div class="flex-1" style="background-color:khaki;">3</div>
            </div>
            
            <p>垂直居中对齐align-items-center</p>
            <div class="flex align-items-center" id="box">
                <div class="flex-1" style="background-color:coral;">1</div>
                <div class="flex-1" style="background-color:lightblue;">2</div>
                <div class="flex-1" style="background-color:khaki;">3</div>
            </div>
            
            <p>底部对齐align-items-end</p>
            <div class="flex align-items-end" id="box">
                <div class="flex-1" style="background-color:coral;">1</div>
                <div class="flex-1" style="background-color:lightblue;">2</div>
                <div class="flex-1" style="background-color:khaki;">3</div>
            </div>
            
            
            <!-- align-self-->
            <div class="sliver">align-self(兼容性不好，慎用)</div>
            <p>拉伸align-self-stretch</p>
            <div class="flex" id="box">
                <div class="flex flex-1 align-self-stretch" style="background-color:coral;"></div>
            </div>
            
            <p>顶部对齐align-self-start</p>
            <div class="flex" id="box">
                <div class="case align-self-start" style="background-color:coral;"></div>
            </div>
            
            <p>垂直居中对齐align-self-center</p>
            <div class="flex" id="box">
                <div class="case align-self-center" style="background-color:coral;"></div>
            </div>
            
            <p>底部对齐align-self-end</p>
            <div class="flex" id="box">
                <div class="case align-self-end" style="background-color:coral;"></div>
            </div>
            
        </article>
    </section>
    <script src="../plugin/jquery/jquery.min.js"></script>
    <script src="../plugin/seedsui/seedsui.min.js"></script>
    <!--Exmobi能力-->
    <script src="../plugin/exmobi/exmobi.js"></script>
    <!--禁止ios弹性-->
    <script src="../plugin/inobounce/inobounce.min.js"></script>
    <script>
    	//定义exmobi返回
    	function back(){history.go(-1);}
    </script>
</body>
</html>
